<!--
 * @Author: 'zhangkeqq' '2211709169@qq.com'
 * @Date: 2025-08-12 11:36:11
 * @LastEditors: 'zhangkeqq' '2211709169@qq.com'
 * @LastEditTime: 2025-08-20 16:14:35
 * @FilePath: \responsiveWeb\src\views\index\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <header :class="{'header--sticky': isSticky,'open': isActive}">
    <div class="logo">公司名称</div>
    <nav>
      <a class="a-first" href="#home">首页</a>
      <a href="#about-us">关于我们</a>
      <a href="#showcases">成功案例</a>
      <a href="#service">服务流程</a>
      <a href="#team-intro">团队介绍</a>
      <a href="#company-activities">公司动态</a>
      <a href="#footer-menus">联系我们</a>
      <a href="#">🔍</a>
    </nav>
    <div  class="burger"  @click="toggle">
        <div class="burger-line1"></div>
        <div class="burger-line2"></div>
        <div class="burger-line3"></div>
    </div>
  </header>
  <div id="home" class="glide">
    <div class="glide__track" data-glide-el="track">
      <div class="glide__slides">
        <!-- 轮播内容 -->
        <div class="glide__slide" v-for="(item, index) in glideList" :key="index">
          <div class="slide-caption" ref="slideCaption">
            <h1>{{ item.title }}</h1>
            <h3>{{ item.explain }}</h3>
            <button @click="goAbout" class="explore-btn">探索更多</button>
          </div>
          <!-- 虚化背景 -->
          <div class="backdrop"></div>
          <img :src="item.img"></img>
        </div>
      </div>
    </div>
     <!-- 左右切换控件 -->
      <div class="glide__arrows" data-glide-el="controls">
        <button class="glide__arrow glide__arrow--left" data-glide-dir="<"><</button>
        <button class="glide__arrow glide__arrow--right" data-glide-dir=">">></button>
      </div>
      
      <!-- 底部切换控件 -->
      <div class="glide__bullets" data-glide-el="controls[nav]">
        <button class="glide__bullet" :class="{active: nowActive === index}" :data-glide-dir="'=' + index" v-for="(item, index) in glideList"></button>
      </div>
  </div>
  <div class="content-wrapper">
    <!-- 关于我们 -->
      <section id="about-us" class="about-us">
        <h2 class="title1">关于我们</h2>
        <div class="intro">
          <p>
            网络公司不仅仅是提供域名注册、空间租用、网站开发、网站建设与网络营销活动策划相关的企业组织。
          </p>
        </div>
        <div class="features" >
          <div class="feature" v-for="(item,index) in aboutList" :key="index">
            <i class="fas" :class="item.icon"></i>
            <h4 class="feature-title">{{ item.name }}</h4>
            <p class="feature-content">
              {{ item.content }}
            </p>
          </div>
        </div>
      </section>
      <!-- 成功案例 -->
      <section id="showcases" class="showcases section-bg">
        <h2 class="title1">成功案例</h2>
        <div class="filter-btns">
          <button class="filter-btn" :class="successIndex == index ? 'active' : ''"  @click="changefilterBtns(item,index)" v-for="(item,index) in successTagList" :data-filter="item.type">{{ item.name }}</button>
        </div>
        <div class="cases" ref="cases">
          <div class="case-item" :class="item.type" v-for="(item,index) in successImgList" :key="index">
            <img :src="item.img" alt="">
          </div>
        </div>
      </section>
      <!-- 服务流程 -->
      <section id="service" class="service">
        <h2 class="title1">服务流程</h2>
        <p class="intro">
          网络综合公司，提供包括网络基础服务（比如域名，主机，邮箱）和网络增值服务（如网站建设和推广，网站优化）等业务
        </p>
        <div class="services">
          <div class="service-item" v-for="(item,index) in serviceList" :key="index">
            <i class="fas " :class="item.icon"></i>
            <h4 class="service-title">{{ item.title }}</h4>
            <p class="service-content">
              {{ item.content }}
            </p>
          </div>
        </div>
      </section>
      <!-- 团队介绍 -->
      <section id="team-intro" class="team-intro section-bg">
        <h2 class="title1">团队介绍</h2>
        <div class="team-members">
          <div class="team-member" v-for="(item,index) in teamList">
            <div class="profile-image">
              <img :src="item.img" alt="">
            </div>
            <h4 class="name">{{ item.name }}</h4>
            <p class="position">{{ item.position }}</p>
            <ul class="social-links">
              <li><a href="http://www.baidu"><i class="fab fa-weixin"></i></a></li>
              <li><a href="http://www.baidu"><i class="fab fa-weibo"></i></a></li>
              <li><a href="http://www.baidu"><i class="fab fa-github"></i></a></li>
              <li><a href="http://www.baidu"><i class="fab fa-linkedin"></i></a></li>
            </ul>
          </div>
        </div>
      </section>
      <!-- 数据 -->
      <section class="data-section">
        <div class="data-piece" v-for="(item,index) in numList">
          <i class="fas" :class="item.icon"></i>
            <div class="num">{{ item.num }}</div>
            <div class="data-desc">{{ item.text }}</div>
        </div>
      </section>
      <!-- 公司动态 -->
      <section id="company-activities" class="company-activities">
        <h2 class="title1">公司动态</h2>
        <p class="intro">关注公司动态，获取一手信息</p>
        <div class="activities">
          <div class="activity" v-for="(item,index) in companyList" :key="index">
            <div class="act-image-wrapper">
              <img :src="item.img" alt="">
            </div>
            <div class="meta">
              <p class="data-published">
                <i class="far fa-calendar"></i>
                {{ item.time }}
              </p>
              <p class="comments">
                <i class="far fa-comments"></i>
                {{ item.comment }}
                <span>条评论</span>
              </p>
            </div>
            <h2 class="act-title">提供互联网接入的ISP公司</h2>
            <article>
              ISP证，全称为互联网接入服务业务(ISP)，是第二类增值电信业务。根据国务院相关规定，从事增值电信业务，就需要办理相应的增值电信业务许可证，增值电信业务经营许可证是按照国务院《中华人民共和国电信条例》，由工信部、各省市通信管理局对从事增值电信业务的企业颁发的从业证明，否则就是无证经营。被查需要负法律责任。
            </article>
            <button class="read-more-btn">阅读更多</button>
          </div>
        </div>
      </section>
  </div>
  <!-- 底部 -->
  <footer>
      <div id="footer-menus" class="footer-menus">
        <div class="contact-us">
          <p class="menu-title">联系我们</p>
          <p>地址：xxxxxxxxxxxxx</p>
          <p>电话:1234567801</p>
          <p>传真:122324332@qq.com</p>
          <p>电子邮件：admin@abc.com</p>
        </div>
        <div class="service-menu footer-menu">
          <p class="menu-title">服务概览</p>
          <ul class="menu-items">
            <li><a href="#">网站建设</a></li>
            <li><a href="#">域名购买</a></li>
            <li><a href="#">网页设计</a></li>
            <li><a href="#">移动应用</a></li>
          </ul>
        </div>
        <div class="service-menu footer-menu">
          <p class="menu-title">成功案例</p>
          <ul class="menu-items">
            <li><a href="#">桌面网站</a></li>
            <li><a href="#">移动网站</a></li>
            <li><a href="#">科研网站</a></li>
            <li><a href="#">软件应用</a></li>
          </ul>
        </div>
        <div class="service-menu footer-menu">
          <p class="menu-title">公司动态</p>
          <ul class="menu-items">
            <li><a href="#">信息公开</a></li>
            <li><a href="#">最近新闻</a></li>
            <li><a href="#">最新博客</a></li>
          </ul>
        </div>
        <div class="service-menu footer-menu">
          <p class="menu-title">帮助与支持</p>
          <ul class="menu-items">
            <li><a href="#">帮助中心</a></li>
            <li><a href="#">联系客服</a></li>
            <li><a href="#">文档资源</a></li>
          </ul>
        </div>
        <p class="icp-info">湘ICP备19026630号-1</p>
        <p class="rights">&copy; 2020 公司名称公司名称科技有限公司</p>
      </div>
    </footer>
    <!-- 返回顶部 -->
    <div @click="scrollToTop" v-show="isSticky" class="scroll-to-top">
      <a href="#"><i class="fas fa-chevron-up"></i></a>
    </div>
</template>

<script setup lang="ts">
import { ref,onMounted,onUnmounted } from 'vue';
import {
  animate,
  stagger,
  createTimer
} from 'animejs';
import Glide from '@glidejs/glide'
import Isotope from 'isotope-layout';
import scrollReveal from 'scrollreveal';
import SmoothScroll from 'smooth-scroll';
import glide1 from '@/assets/images/people-in-couch-1024248.jpg'
import glide2 from '@/assets/images/apple-apple-device-design-desk-285814.jpg'
import glide3 from '@/assets/images/apple-laptop-notebook-office-39284.jpg'
const nowActive = ref(0)
const glideList = [
  {
    title: '科技推动人类进步，研发引领实业发展。',
    explain: '自力更生是中华民族自立于世界民族之林的奋斗基点，自主创新是我们攀登世界科技高峰的必由之路。',
    img: glide1
  },
  {
    title: '科技推动人类进步，研发引领实业发展。',
    explain: '自力更生是中华民族自立于世界民族之林的奋斗基点，自主创新是我们攀登世界科技高峰的必由之路。',
    img: glide2
  },
  {
    title: '科技推动人类进步，研发引领实业发展。',
    explain: '自力更生是中华民族自立于世界民族之林的奋斗基点，自主创新是我们攀登世界科技高峰的必由之路。',
    img: glide3
  }
]
onMounted(() => {
  init()
  initSuccess()
  window.addEventListener('scroll', handleScroll);
  scrollRevealChange()
  initSmooth()
})

//轮播图区域
const init = () => {
  const captionsEL = document.querySelectorAll(".slide-caption");
  let glide =  new Glide('.glide',{
    type: 'carousel',//衔接
    startAt: 0,//从特定幻灯片编号开始
    autoplay:4000,// 自动播放时间间隔
    hoverpause:false,//鼠标停留幻灯片上时，停止自动播放
  })
  //底部指示器选中状态
  glide.on('move', function() {
      nowActive.value = glide.index
  })
  //动画
  glide.on(["mount.after","run.after"],()=>{
     const caption = captionsEL[glide.index];
    animate(caption.children,{
      opacity:[0,1],
      duration: 400,
      easing:'linear',
      delay:stagger(400,{start:300}),
      translateY:[stagger([40,10]),0]
    })
  })
  glide.on("run.before",()=>{
    document.querySelectorAll(".slide-caption > *").forEach((el:any) => {
      el.style.opacity = 0;
    });
  })
  glide.mount();
}

//关于我们
const aboutList = [
  {
    name:'品牌创意',
    icon:'fa-lightbulb',
    content:'为企业设计独特的并能完美呈现企业价值观的视觉。'
  },
  {
    name:'整合营销',
    icon:'fa-chart-line',
    content:'通过市场进入分析，指定网络营销战略，网络营销实施。'
  },
  {
    name:'电子商务',
    icon:'fa-shopping-cart',
    content:'根据企业需求，开发不同的销售渠道，通过网上直销'
  },
  {
    name:'网页设计',
    icon:'fa-desktop',
    content:'通过网站建设，智能建站，域名主机，企业邮箱'
  },
  {
    name:'网站优化',
    icon:'fa-tachometer-alt',
    content:'网站推广是指将网站推广到国内各大知名网站和搜索引擎'
  },
  {
    name:'网站架设',
    icon:'fa-server',
    content:'通过绑定域名和服务器，把网站展现给全世界。'
  },
]

// 成功案例
let successTagList = [
  {type:'*',name:'全部'},
  {type:'.web',name:'WEB'},
  {type:'.mobile',name:'移动'},
  {type:'.science',name:'科研'},
]
import successImg1  from '@/assets/images/gray-laptop-computer-showing-html-codes-in-shallow-focus-160107.jpg';
import successImg2  from '@/assets/images/photo-of-imac-near-macbook-1029757.jpg';
import successImg3  from '@/assets/images/apple-laptop-notebook-office-39284.jpg';
import successImg4  from '@/assets/images/apple-apple-device-design-desk-285814.jpg';
import successImg5  from '@/assets/images/person-using-black-and-white-smartphone-and-holding-blue-230544.jpg';
import successImg6  from '@/assets/images/person-holding-a-smartphone-892757.jpg';
import successImg7  from '@/assets/images/blur-close-up-code-computer-546819.jpg';
import successImg8  from '@/assets/images/bokeh-photography-of-person-holding-turned-on-iphone-1440727.jpg';
let successImgList = [
  {type:'web science',img:successImg1},
  {type:'web science',img:successImg2},
  {type:'web',img:successImg3},
  {type:'web',img:successImg4},
  {type:'mobile',img:successImg5},
  {type:'science',img:successImg6},
  {type:'mobile web science',img:successImg7},
  {type:'mobile',img:successImg8}
]
let isotope = ref<any>()
const initSuccess = () => {
  isotope.value = new Isotope(".cases", {
    layoutMode: "fitRows",
    itemSelector: ".case-item",
  });
  isotope.value.arrange({filter:successTagList[0].type})
}

const successIndex = ref(0)
const changefilterBtns = (item:any,index:number)=>{
  isotope.value.arrange({filter:item.type})
  successIndex.value = index
}

//服务流程
const serviceList = [
  {title:'需求沟通',icon:'fa-comments',content:'客户提出网站建设基本需求，包括设计要求及功能要求。'},
  {title:'项目评估',icon:'fa-sign-in-alt',content:'根据客户提出的需求进行评估，估算出相应的时间与费用。'},
  {title:'签订合同',icon:'fa-file-signature',content:'合作双方确认费用，工期，合作要求的基础上，双方共同签订合同。'},
  {title:'提案阶段',icon:'fa-user',content:'完成网站初稿设计，包括首页风格，内页风格页面。'},
  {title:'制作阶段',icon:'fa-chalkboard-teacher',content:'完成所有网页的设计，进行程序开发以及前后台的页面整合。'},
  {title:'网站验收',icon:'fa-user-check',content:'根据合同条款进行网站验收，并签署网站验收确认单。'},
]

import teamImg1 from  '@/assets/images/man-wearing-black-suit-2955376.jpg'
import teamImg2 from '@/assets/images/business-woman-2697954_1920.jpg'
import teamImg3 from '@/assets/images/selective-focus-photograph-of-man-wearing-gray-suit-jacket-1138903.jpg'
import teamImg4 from '@/assets/images/smiling-woman-wearing-black-sweater-1587009.jpg'
//团队介绍
const teamList = [
  {name:'张三',position:'前端工程师',img:teamImg1},
  {name:'李四',position:'前端工程师',img:teamImg2},
  {name:'王五',position:'前端工程师',img:teamImg3},
  {name:'赵六',position:'前端工程师',img:teamImg4}
]

//数据
const numList = [
  {num:156,icon:'fa-code',text:'行代码'},
  {num:288,icon:'fa-adjust',text:'个奖项'},
  {num:189,icon:'fa-user',text:'位客户'},
  {num:360,icon:'fa-folder',text:'个项目'}
]

//公司动态
import companyImg1  from '@/assets/images/activity01-image.jpg'
import companyImg2 from '@/assets/images/red-suspension-bridge-3493772.jpg'
import companyImg3 from '@/assets/images/watercrafts-on-river-3464632.jpg'
const companyList = [
  {img:companyImg1,time:'2020年4月22日',comment:'22'},
  {img:companyImg2,time:'2020年4月11日',comment:'33'},
  {img:companyImg3,time:'2020年4月03日',comment:'44'},
]

//吸顶
// 控制是否吸顶的状态
const isSticky = ref(false);
// 滚动阈值，超过这个值就吸顶
const scrollThreshold = ref(800);
// 处理滚动事件的函数
const handleScroll = () => {
  // 获取当前滚动位置
  const scrollPosition = window.scrollY;
  // 当滚动位置超过阈值时，设置吸顶状态
  isSticky.value = scrollPosition > scrollThreshold.value;
  //滚动关闭导航栏
  if (isActive.value == true) {
      isActive.value = false
  }
};

//返回顶部
const scrollToTop = ()=>{
   // 使用平滑滚动效果
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
}

// 滑动动画
//1.通用滑动出现动画配置项
const staggeringOption = {
  delay:300,    //设置动画触发前的延迟时间。
  distance:'50px',//设置元素在动画过程中移动的距离。
  duration:500,  //设置动画的持续时间。
  easing:"ease-in-out", //定义动画的速度曲线
  origin:'bottom', //定义元素动画的起始位置。
}

const scrollRevealChange = ()=>{
//interval设置等待时间
scrollReveal().reveal('.feature',{...staggeringOption,interval:350});
scrollReveal().reveal('.service-item',{...staggeringOption,interval:350});
scrollReveal().reveal('.data-section',{
  beforeReveal:()=>{
    animate('.data-piece .num',{
      innerHTML: (el:any) => {
        return [0, el.innerHTML];
      },
      duration: 1000,
      modifier: (val:number) => Math.floor(val),//整数
      easinge: "easeInExpo",
    })
  }
});
}


//平滑动画
// 初始化Smooth-Scroll
const scroll = ref()
const initSmooth = ()=>{
  scroll.value = new SmoothScroll('nav a[href*="#"] , .scroll-to-top a[href*="#"]', {
    header: "header",
    behavior: 'smooth', // 平滑滚动效果
    duration: 1000,     // 滚动动画时长1秒
    offset: 50          // 滚动偏移量为50px
  });
}

const goAbout = ()=>{
   scroll.value.animateScroll(document.querySelector("#about-us"));
}

// 折叠按钮事件
const isActive = ref(false)
const toggle = ()=>{
  isActive.value = !isActive.value
}


// 组件卸载时移除滚动事件监听，防止内存泄漏
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});
</script>

<style>
@import '@glidejs/glide/dist/css/glide.core.min.css';
</style>
<style lang="scss" scoped>
.header--sticky {
  position: fixed;
  background-color: white;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.2);
  animation: dropDown 0.5s ease-in-out forwards;
}
.header--sticky .logo,
.header--sticky nav a,
.header--sticky nav i {
  color: variable.$text-color-dark;
}

@keyframes dropDown {
  from {
    transform: translateY(-100px);
  }
  to {
    transform: translateY(0);
  }
}
header{
 width: 100%;
 height: 80px;
 position: absolute;
 top:0;
 z-index: 100;
 display: grid;
 grid-template-columns: 1fr 3fr;
 align-items: center;
 padding: 0 40px;
  .logo{
    font-size: 24px;
    font-weight: 600;
    color: variable.$text-color-lightest;
  }
  nav{
    justify-self: end;
    a{
      text-decoration: none;
      color: variable.$text-color-lightest;
      margin:0 14px;
    }
  }
}
.glide {
  position: relative;
  .glide__slide {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    overflow: hidden;
    .slide-caption > *{
      opacity: 0;
    }
    .slide-caption{
       position: absolute;
       z-index: 70;
       text-align: center;
       max-width: 60vw;
       color: #fff;
       h1{
        font-size: 54px;
        font-weight: 600;
       }
       h3{
        font-size: 24px;
        font-weight: 600;
        margin:48px 0;
       }
      .explore-btn{
        padding:  14px 32px;
        border: 0;
        border-radius: 4px;
        background: variable.$primary-color;
        color: variable.$text-color-lightest;
        font-size: 18px;
        cursor: pointer;
        outline: none;
       }
    }
    .backdrop{
        position: absolute;
        left: 0;
        top: 0;
        z-index: 60;
        height: 100%;
        width: 100%;
        background: variable.$backdrop-color;
        opacity: 0.2;
      }
    img {
      width: 100vw;
      max-width: 100%;
      height: 100vh;
      object-fit: cover;
      /* 等比例缩放 */
      min-height: -webkit-fill-available;
    }
  }
  .glide__arrows{
    width:100%;
    position: absolute;
    top:45%;
    .glide__arrow--left{
      width: 38px;
      height: 38px;
      border-radius: 5px;
      position: absolute;
      left: 10px;
      background: #ffffff4d;
      border: 0;
      color:#fff;
    }
    .glide__arrow--right{
      width: 38px;
      height: 38px;
      border-radius: 5px;
      position: absolute;
      right: 10px;
      background: #ffffff4d;
      border:0;
      color:#fff;
      
    }
  }
  .glide__bullets{
    position: absolute;
    left:50%;
    transform: translate(-50%);
    bottom: 4%;
    .glide__bullet{
      width:50px;
      height:8px;
      background: variable.$secondary-color;
      margin: 0 10px;
      border: 0;
    }
    .active{
      background:variable.$primary-color;
    }
  }

}

.content-wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow: hidden;
  .about-us {
    padding-bottom: 32px;
  }
  section {
      display: grid;
      justify-items: center;
      max-width: 1180px;
      padding: 0 80px;

      .title1 {
        font-size: 34px;
        color: variable.$text-color-darker;
        padding-top: 80px;
      }
      .title1::after {
        content: "";
        display: block;
        width: 80%;
        height: 4px;
        background: variable.$primary-color;
        margin-top: 14px;
        transform: translateX(15%);
      }
      .intro {
        margin: 28px 0 60px 0;
        font-size: 18px;
        color: variable.$text-color-dark-gray;
      }
      .features{
        display: grid;
        /* 重复几次，重复的值  1fr：容器宽度的1/3*/
        grid-template-columns: repeat(3,1fr);
        grid-template-rows: 126px 126px;
        column-gap: 5vw;
        .feature{
          display:grid;
          grid-template-areas: 
          "icon title"
          "icon content";
          grid-template-columns: 60px 1fr;
          grid-template-rows: 1fr 3fr;
          
        }
        .fas{
          grid-area: icon;
          font-size: 34px;
          color: variable.$primary-color;
        }
        .feature-title{
          grid-area: title;
          font-size: 18px;
          color: variable.$text-color-dark;
        }
        .feature-content{
          grid-area: content;
          color: variable.$text-color-gray;
          margin-top:8px;
        }
      }
  }
  .showcases{
    max-width: unset;
    padding: 0px;
    background-color: #f9fbfb;
    width: 100vw;
    height: 100%;
    .filter-btns{
      margin-top: 54px;
      margin-bottom: 38px;
      .filter-btn{
        margin: 0 7px;
        background-color: variable.$secondary-color;
        border: 0;
        color: variable.$text-color-dark-gray;
        padding: 8px 18px;
        border-radius: 4px;
        cursor: pointer;
        transition: 0.4s;
      }
      .active{
        background: variable.$primary-color;
        color: white;
      }
    }
    .filter-btn:focus,
    .filter-btn:active {
        outline: none;
    }
    .filter-btn.active,
    .filter-btn:hover {
        background: variable.$primary-color;
        color: white;
    }
    .cases {
      width: 100vw;
      .case-item {
        width: 25vw;
        height: 20vw;
        overflow: hidden;
          img{
            width:100%;
            height:100%;
            object-fit: cover;
          }
      }
    }
  
  }
  /* 服务流程 */
  .service {
    padding-top: 40px;
    .services{
      display: grid;
      grid-template-columns:repeat(3,1fr);
      grid-template-rows: 1fr 1fr;
      column-gap: 38px;
      row-gap: 34px;
      .service-item{
        display: grid;
        grid-template-areas: "icon title" "icon content";
        grid-template-columns: 70px 1fr;
        grid-template-rows: 1fr 3fr;
        padding: 24px;
        box-shadow: 0px 0px 18px rgba(0,0,0,0.06);
        .fas{
          grid-area:icon;
          font-size: 42px;
          color: variable.$primary-color;
          padding-top: 6px;
        }
        .service-title{
          grid-area: title;
          color: variable.$text-color-dark;
          font-size: 24px;
        }
        .service-content{
          grid-area: content;
          color: variable.$text-color-gray;
          margin-top:8px;
          line-height: 30px;
          font-size: 16px;

        }
      }
    }
  }

  //  团队介绍
  .team-intro{
    padding-top: 62px;
    padding-bottom: 52px;
    .team-members{
      display: grid;
      grid-template-columns: repeat(4,1fr);
      column-gap: 24px;
      margin-top: 86px;
      .team-member:hover{
        transform: translateY(-20px) scale(1.05);
        box-shadow: 0px 0px 36px rgba(0,0,0,0.1);
      }
      .team-member{
        background: white;
        box-shadow: 0px 0px 24px rgba(0,0,0,0.2);
        text-align: center;
        padding-bottom: 28px;
        transition: 0.4s;
        display: grid;
        justify-items: center;
        .profile-image{
          //overflow: hidden;
          img{
            width: 240px;
            height: 264px;
            object-fit: cover;
            object-position: top center;
          }
        }
        .name{
          margin-top: 18px;
          font-size: 18px;
          font-weight: 500;
          color: variable.$text-color-dark;
        }
        .position{
            color: variable.$text-color-gray;
            margin-top: 20px;
            margin-bottom: 18px;
        }
        .social-links{
          width: 100%;
          max-width: 200px;
          display: flex;
          justify-content: space-between;
          padding: 0 42px;
          li{
            list-style: none;
            a{
              color: variable.$text-color-dark;
              text-decoration: none;
            }
          }
        }

      }
    }
  }
  // 数据
  .data-section{
    margin-top: 60px;
    max-width: unset;
    width: 100vw;
    height: 255px;
    background-image: url('@/assets/images/adult-business-computer-contemporary-380769.jpg');
    background-size: cover;
    background-position: center;
    display: grid;
    grid-template-columns: repeat(4,minmax(auto,200px));
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 20;
    &::before{
      content: "";
      display: block;
      position: absolute;
      background: variable.$backdrop-color;
      width: 100%;
      height: 100%;
      z-index: 1;
    }
    .data-piece{
      width: 250px;
      display: grid;
      grid-template-rows: repeat(3,1fr);
      justify-items: center;
      color: white;
      position: relative;
      z-index: 40;
      .fas{
        font-size: 44px;
      }
      .num{
        margin-top: 7px;
        font-size: 41px;
        font-weight: 600;
      }
      .data-desc{
        font-size: 18px;
        font-weight: 500;
        margin-top: 8px;
      }
    }
  }

  .company-activities{
    margin-top: 50px;
    padding-bottom: 124px;
    .activities{
      display: grid;
      grid-template-columns: repeat(3,1fr);
      column-gap: 24px;
      .activity:hover{
        transform: translateY(-20px) scale(1.05);
        box-shadow: 0px 0px 36px rgba(0,0,0,0.1);
      }
      .activity{
        box-shadow: 0px 0px 24px rgba(0,0,0,0.1);
        padding: 24px;
        transition: 0.4s;
        .act-image-wrapper{
          height: 255px;
          overflow: hidden;
          margin: -24px;
          margin-bottom: 0;
          img{
            width: 100%;
            min-height: 300px;
            object-fit: cover;
          }
        }
        .meta{
            margin-top: 20px;
            margin-bottom: 12px;
            color: variable.$text-color-light-gray;
            font-size: 12px;
            display: flex;
            p:last-child{
              margin-left: 36px;
            }
        }
        .act-title{
           color: variable.$text-color-dark;
           font-size: 18px;
           margin-bottom: 16px;
        }
        article{
          color: variable.$text-color-gray;
          letter-spacing: 0.54px;
          line-height: 24px;
        }
        .read-more-btn{
          border: 0;
          color: white;
          background: variable.$primary-color;
          padding: 6px 14px;
          margin-top: 24px;
          border-radius: 4px;

        }
      }
    }
  }
}


//底部
footer{
  background: #181818;
  display: grid;
  justify-items: center;
  padding-top: 72px;
  padding-bottom: 24px;
  .footer-menus{
    width: 100%;
    max-width: 1180px;
    display: grid;
    grid-template-columns: 2fr repeat(4,1fr);
    padding: 0 80px;
    position: relative;

    .menu-title{
      font-size: 16px;
      color: white;
      font-weight: 500;
      margin-bottom: 20px;
    }
    .contact-us{
      justify-self: start;
      color: variable.$text-color-lightest;
      p:not(:first-child){
        padding-bottom: 16px;
      }
    }
    .menu-items{
      li{
        list-style: none;
        padding-bottom: 8px;
        a{
          text-decoration: none;
          font-weight: 300;
          color: variable.$text-color-lightest;
        }
      }
    }
    .icp-info{
      margin-top: 24px;
      margin-bottom: 16px;
    }
    .icp-info,.rights{
      grid-column: 1 / -1;
      justify-self: center;
      color: white;
    }

  }
}
.scroll-to-top{
  z-index: 300;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: variable.$primary-color;
  color: white;
  text-decoration: none;
  position: fixed;
  bottom: 60px;
  right: 30px;
  .fas{
    color: white;
  }
}

@media (max-width: 1100px) {

  header nav {
    display: none !important;
  }

  header .burger {
    display: block !important;
    position: relative !important;
    width: 20px !important;
    height: 6px !important;
    justify-self: end !important;
    cursor: pointer !important;
  }

  .burger-line1,
  .burger-line2,
  .burger-line3 {
    width: 20px !important;
    height: 2px !important;
    background: variable.$text-color-lightest !important;
  }

  .burger-line1 {
    position: absolute !important;
    top: -6px !important;
  }

  .burger-line3 {
    position: absolute !important;
    top: 6px !important;
  }

  header.open nav {
    display: grid !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: #fff !important;
    grid-auto-rows: max-content !important;
    justify-items: end !important;
    padding: 0 40px !important;
    animation: slideDown 0.6s ease-out forwards !important;
    .a-first{
      margin-top: 80px !important;
    }
  }

  header.open nav > * {
    font-size: 18px !important;
    margin: 20px 10px !important;
    color: variable.$text-color-darker !important;
    animation: showMenu 0.5s linear forwards 0.4s !important;
  }

  header.opem nav > i.fas {
    margin-top: 10px  !important;
  }

  header.open .burger-line1,
  header.open .burger-line2,
  header.open .burger-line3,
  header.header--sticky .burger-line1,
  header.header--sticky .burger-line2,
  header.header--sticky .burger-line3 {
    background: variable.$text-color-darker !important;
    transform: 0.4s ease !important;
  }

  header.open .burger-line1 {
    transform: rotate(45deg) translate(3px, 5px)  !important;
  }

  header.open .burger-line2 {
    transform: translateX(5px) !important;
    opacity: 0 !important;
  }

  header.open .burger-line3 {
    transform: rotate(-45deg) translate(3px, -5px) !important;
  }

  header.open .logo {
    z-index: 40 !important;
    color: variable.$text-color-darker !important;
  }

  @keyframes slideDown {
    from {
      height: 0 !important;
      opacity: 0 !important;
    }
    to {
      height: 100vh !important;
      padding-top: 80px !important;
      opacity: 1 !important;
    }
  }

  @keyframes showMenu {
    from {
      opacity: 0 !important;
      transform: translateY(-1vh) !important;
    }
    to {
      opacity: 1 !important;
      transform: translateY(0) !important;
    }
  }

  .service-item{
    .service-title{
      font-size: 20px !important;
    }
    .service-content{
      font-size: 14px !important;
      line-height: 24px !important;
    }
  }
  .team-members{
    grid-template-columns: repeat(2,1fr) !important;
    row-gap: 36px !important;
    column-gap: 6vw !important;
  }

  .activities{
    grid-template-columns: repeat(2,1fr) !important;
    row-gap: 36px !important;
  }
}

@media(max-width:992px){
  .slide-caption{
    h1{
      font-size: 48px !important;
    }
    h3{
      font-size: 18px !important;
    }
  }
  .features , .services{
    grid-template-columns: repeat(2,1fr)  !important;
    grid-template-rows: unset !important;
  }
  .data-section{
    grid-template-columns: repeat(2,minmax(200px,auto)) !important;
    padding: 24px 0 !important;
    height: auto !important;
    row-gap: 24px !important;
    background-size: 200% !important;
  }
  .showcases .case-item{
    width: calc(100vw/3) !important;
  }
}

@media(max-width:768px){
  section, .footer-menus{
    padding: 0 40px !important;
  }
  .footer-menus{
    grid-template-columns: 2fr repeat(2,1fr) !important;
    row-gap: 24px !important;
    text-align: right !important;
    .contact-us{
      grid-row:  1/3 !important;
      text-align: left !important;
      .menu-title{
        text-align: left !important;
      }
    }

  }
  .activities{
    grid-template-columns: 1fr !important;
    row-gap: 36px !important;
  }
  .data-section{
    grid-template-columns: 1fr !important;
    background-size: 300% !important;
  }
  .team-members{
    grid-template-columns: minmax(200,400) !important;
  }
  .features, .services{
    grid-template-columns: 1fr !important;
  }
  .showcases .case-item{
    width: calc(100vw /2) !important;
    height: 30vw !important;
  }
}

@media(max-width:576px){
  .slide-caption{
    h1{
      font-size: 28px !important;
    }
    h3{
      font-size: 14px !important;
    }
    .explore-btn{
      font-size: 14px !important;
      padding: 8px 18px !important;
    }
  }
  .showcases{
    .case-item{
      width: 100vw !important;
      height: 60vw !important;
    }
  }
  .footer-menus{
    grid-template-columns: 1fr !important;
    justify-self: center !important;
    text-align: center !important;
    .contact-us{
      justify-self: center !important;
      text-align: left !important;
      .menu-title{
        text-align: center !important;
      }
    }
  }
}
</style>
